<!--
 * @Author: nns4
 * @Date: 2019-10-30 17:37:50
 * @LastEditors: nns4
 * @LastEditTime: 2020-04-20 16:36:12
 * @FilePath: /citciWechartShop/src/App.vue
 * @Description: 
 -->
<template>
  <div>
    <div class="pageView"></div>
    <div id="PAGE" :class="getHideNavs.includes($route.name)? '':'safeBottom'">
      <keep-alive :include="getPageCache">
        <router-view />
      </keep-alive>
    </div>
    <toTop :showScrollTop="200"></toTop>
    <van-tabbar
      @change="tabbarChange"
      safe-area-inset-bottom
      class="bottomNav"
      v-model="$store.state.app.activeNav"
      v-show="!getHideNavs.includes($route.name)"
    >
      <van-tabbar-item :to="{ name: 'home'}" replace name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item :to="{ name: 'classify'}" replace name="classify" icon="search">分类</van-tabbar-item>
      <van-tabbar-item
        id="car"
        :to="{ name: 'shopCar'}"
        :info="geProSize"
        name="shopCar"
        replace
        icon="friends-o"
      >购物车</van-tabbar-item>
      <van-tabbar-item :to="{ name: 'me'}" replace name="me" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// 禁止手机端扩大和缩小手势
window.onload = function() {
  document.addEventListener("touchstart", function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener("gesturestart", function(event) {
    event.preventDefault();
  });
};
import toTop from "@c/backToTop";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "app",
  components: {
    toTop
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["setActiveNav"]),
    tabbarChange(e) {
      this.setActiveNav(e);
    }
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "getHideNavs",
      "getHideBackTops",
      "geProSize",
      "getPageCache"
    ])
  },
  watch: {}
};
</script>



<style lang="less">
.bottomNav {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.safeBottom {
  padding-bottom: 50px;
  padding-bottom: calc(~"env(safe-area-inset-bottom) + 50px");
}
#PAGE {
  position: relative;
  z-index: 1;
}
.pageView {
  width: 100vw;
  height: 100vh;
  background: white;
  position: fixed;
  z-index: 0;
}
</style>
